<template>
    <div class="container">
      <div class="w1300">
        <!--面包屑-->
        <breadcrumb
          currentPath="/mall/goods/detail"
          title="商品详情"
        ></breadcrumb>
  
        <div class="shop-name-wrap flex-yc flex-xbt">
          <div class="flex-yc">
            <h2>张三的店铺</h2>
            <div class="comment flex-yc">
              评价：
              <el-rate v-model="comment" />
            </div>
          </div>
          <div class="customer-go-shop flex-yc">
            <router-link to="">
              <el-icon>
                <ChatLineRound />
              </el-icon>
              联系客服
            </router-link>
          </div>
        </div>

        <div class="container_waper">
          <gooditem/>
        </div>
  
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
  import gooditem from '@/pages/mall/components/gooditem.vue'
  
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const address = ref('')
  const comment = ref(3)
  const radio1 = ref('')
  const radio2 = ref('')
  const num = ref(0)
  
  const handleChange = (value: number) => {
    console.log(value)
  }
  
  const props = {
    expandTrigger: 'hover' as const,
  }
  
  const onChangeAddress = (value: string) => {
    console.log(value)
  }
  
  const onHandlerTabChange = (value: string) => {
    console.log(value)
  }
  

  </script>
  
  <style scoped lang="scss">
  .container {
    background-color: #f7f8fa;
  
    .shop-name-wrap {
      padding: 16px 40px;
      background-color: #fff;
      border-radius: 500px;
  
      h2 {
        padding-right: 63px;
        margin-right: 28px;
        font-size: 20px;
        font-weight: 600;
        color: #021429;
        border-right: 1px solid $borderCol;
      }
  
      .comment {
        font-size: 14px;
        color: #9ba1a8;
      }
  
      .customer-go-shop {
        a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 110px;
          height: 36px;
          font-size: 14px;
          color: #9ba1a8;
          border: 1px solid $borderCol;
          border-radius: 50px;
  
          :deep {
            .el-icon {
              margin-right: 4px;
            }
          }
  
          &:hover {
            color: $primary;
            border-color: $primary;
          }
  
          & + a {
            margin-left: 20px;
          }
        }
      }
    }
    .container_waper{
      min-height: 780px;
      padding-top: 26px;
      padding-bottom: 26px;
    }
  
  
   
  }
  </style>
  